<template>
  <div class="layout">
    <el-form ref="formRef" :model="formData" class="searchForm" :inline="true">
      <div>
        <el-form-item label="时间筛选" class="selectTime changeTime">
          <el-button plain :type="currentId == 1 ? 'primary' : ''" @click="selectTime(1)">昨天</el-button>
          <el-button plain :type="currentId == 2 ? 'primary' : ''" @click="selectTime(2)">最近7天</el-button>
          <el-button plain :type="currentId == 3 ? 'primary' : ''" @click="selectTime(3)">最近30天</el-button>
          <el-date-picker v-model="formData.date1" @change="checkTimeFun" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间" style="margin-left: 16px"></el-date-picker>
          <div class="text-center"></div>
          <el-date-picker v-model="formData.date2" @change="checkTimeFun" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="选择成员和部门" class="selectMembers" label-width="125px">
          <el-select v-model="memberData" placeholder="全部" multiple collapse-tags collapse-tags-tooltip @click.stop="openDepart('formData', '')" :popper-append-to-body="false" popper-class="zw-hide_select_option" @change="changeDepart">
            <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }} </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
        <el-button @click="resetForm(formRef)">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" @submit="getZWDepartData" />

    <!-- 标签弹框 -->
    <ZWSelectTag ref="searchSelectRef" @submit="getTags" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue'
  import ZWDepart from '@/components/ZWDepart.vue'
  import ZWSelectTag from '@/components/ZWSelectTag.vue'
  import { getSetionId, getDay } from '@/utils/utils'
  //import { getDay } from '@/utils/timeCycle'
  import type { ElForm } from 'element-plus'
  import { useStore } from '@/store'
  const store = useStore()
  const emit = defineEmits(['searchData'])
  // 创建人options
  const memberData = ref([])
  const creators = ref([])
  const users = ref([])
  const currentId = ref(2) // 选择最近天数的 id
  const DepartRef = ref({})
  // 收集的表单数据
  const formData = reactive({
    member: users,
    departments: [],
    date1: '',
    date2: ''
  })
  formData.date1 = getDay(-6)
  formData.date2 = getDay(0, true)
  // 选择最近时间i
  const selectTime = (i: any) => {
    currentId.value = i
    switch (i) {
      case 1:
        formData.date1 = getDay(-1)
        formData.date2 = getDay(-1, true)
        break
      case 2:
        formData.date1 = getDay(-6)
        formData.date2 = getDay(0, true)
        break
      case 3:
        formData.date1 = getDay(-29)
        formData.date2 = getDay(0, true)
        break
    }
  }
    // 删除部门成员
  const changeDepart = (data: any) => {
    let removeDepart = creators.value.find((item: any) => !data.includes(item.id))
    let arr: any[] = creators.value.filter((item: any) => data.includes(item.id))
    formData.member = []
    formData.departments = []
    arr.forEach((item: any) => {
      if (item.type == 'user') {
        formData.member.push(item.id)
      } else {
        formData.departments.push(item.id)
      }
    })
    memberData.value = getSetionId('id', arr)
    creators.value = arr
    DepartRef.value.removeItem(removeDepart)
  }
  // 查询按钮
  const submitForm = (data: any) => {
    console.log('查询', formData)
    emit('searchData', formData)
  }
  // 清空
  const resetForm = (formEl: any) => {
    currentId.value = 2
    formData.member = []
    formData.departments = []
    memberData.value = []
    creators.value = []
    formData.date1 = getDay(-7)
    formData.date2 = getDay(0, true)
    emit('searchData', formData)
  }
  // 获取当前选中的客户
  let departTypeObj = {
    departType: '', //当前打卡选择员工的类型
    departData: [], //选中的数据
    itemData: '' //当前传入的数据
  }
  const openDepart = (type: string, data: any) => {
    departTypeObj.departType = type
    if (type != 'formData') {
      departTypeObj.departData = []
    }
    if (data) {
      departTypeObj.itemData = data
      DepartRef.value.appDialog.chooseArr = data.cust_distribution && data.cust_distribution.work_user ? [data.cust_distribution.work_user.id] : []
      DepartRef.value.appDialog.isChooseDisabled = true
      DepartRef.value.appDialog.multiple = false
    } else {
      DepartRef.value.appDialog.multiple = true
      departTypeObj.itemData = {}
      DepartRef.value.appDialog.chooseArr = type == 'formData' ? formData.employee_ids : []
    }
    DepartRef.value.departVisble = true
    DepartRef.value.appDialog.isInit = true
    DepartRef.value.isMember = false // 可以选择部门
    DepartRef.value.appDialog.title = '选择部门/员工'
    DepartRef.value.selectedMember = creators.value
  }
  // 获取当前选中的员工的数据
  const getZWDepartData = (val: any) => {
    creators.value = val
    memberData.value = getSetionId('id', val)
    formData.member = []
    formData.departments = []
    creators.value.forEach((item: any, index: any) => {
      if(item.type == 'user'){
        formData.member.push(item.id)
      }else{
        formData.departments.push(item.id)
      }
    })
    DepartRef.value.departVisble = false
  }
  // 检查时间是否正确
  const checkTimeFun = () => {
    if (formData.date1 && formData.date2) {
      if (new Date(formData.date1.replace(/-/g, '/')).getTime() > new Date(formData.date2.replace(/-/g, '/')).getTime()) {
        let time = formData.date1
        formData.date1 = formData.date2
        formData.date2 = time
      }
    }
  }
</script>

<style lang="scss" scoped>
  .layout {
    padding: 0 20px 0 0;
    position: relative;
    height: 106px;
    background: #fff;
    display: flex;
    align-items: center;
    .searchForm {
      padding: 0 24px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      .search_item {
        max-width: 180px;
        margin-bottom: 0;
      }
      :deep .el-select {
        width: 180px;
      }
      :deep .el-form-item {
        margin: 5px;
      }
      :deep .el-form-item__content {
        display: flex;
        align-items: center;
      }
      :deep .el-input--prefix .el-input__inner {
        padding-left: 10px;
        padding-right: 0px;
      }
      .selectTime {
        .selectTime_btn {
          display: flex;
          align-items: center;
          &_item {
            padding: 0 18px;
            margin-right: 8px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            cursor: pointer;
            flex-shrink: 0;
          }
          .active {
            border: 1px solid #ff6b00;
            color: #ff6b00;
          }
        }
      }
      .search_btn {
        position: absolute;
        top: 5px;
        right: 0;
      }
      .changeTime {
        .picker_time {
          min-width: 160px;
          :deep .el-input__icon.el-icon {
            display: none;
          }
        }
        .text-center {
          width: 14px;
          border-top: 1px solid #969696;
          margin: 0 13px;
        }
      }
      .selectMembers {
        .Select {
          margin-right: 16px;
        }

        .text-center {
          width: 14px;
          border-top: 1px solid #969696;
          margin: 0 13px;
        }
      }
    }
    .text {
      font-size: 14px;
      color: #848484;
      line-height: 14px;
      position: absolute;
      right: 8px;
      top: -22px;
    }
  }
</style>
